import React, { useState, useEffect } from 'react';
import { useThemeChange } from '@/hooks/useThemeChange';
// @ts-ignore
import { getCssVariableValue } from '@/utils/utils';
// @ts-ignore
import { TjTitle, TjChart } from '@/pages/ETrade/components';
import { TRDefault } from '@/components/index.js';
import { Select } from 'antd';
import { priceDirectionOptions } from '../../helper.js';
import { baseOption, perY } from '../../charts.jsx';

const PriceDirection: React.FC<IPriceDirectionProps> = (props) => {
  const [chartData, setChartData] = useState({});
  const { theme } = useThemeChange();

  const onChange = (value: number) => {
    props.onChange(value);
  };

  const getOption = (data: any) => {
    return {
      ...baseOption(),
      dataset: {
        source: data,
        dimensions: [
          'id',
          'forePriceDiff',
          'spreadDirection',
          'dayAheadClearPrice',
          'realtimeClearPrice',
          'foreDiffProb',
        ],
      },
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          name: '元/MWh',
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          type: 'value',
          min: -1,
          max: 2,
          interval: 1,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          type: 'value',
          gridIndex: 1,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          ...perY,
          name: '置信度',
          gridIndex: 1,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
      ],
      series: [
        {
          type: 'bar',
          name: '价差方向预测值',
          props: { xAxisIndex: 0, yAxisIndex: 1 },
        },
        {
          type: 'bar',
          name: '价差方向',
          props: { xAxisIndex: 0, yAxisIndex: 1 },
        },
        {
          type: 'line',
          name: '日前电价',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'line',
          name: '实时电价',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'line',
          name: '价差置信度',
          props: { xAxisIndex: 1, yAxisIndex: 3 },
        },
      ],
    };
  };

  useEffect(() => {
    setTimeout(() => {
      setChartData(getOption(props.data));
    }, 1);
  }, [props.data, theme]);

  return (
    <div className="price-direction">
      <TjTitle
        title="实时-日前出清价差方向预测"
        tooltip="天机基于数据研判与AI模型，对未来实时出清价格与日前出清价格的价差方向进行预测。注意，调度行为、市场数据披露不全等原因均会降低预测准确度，结果仅供参考，请用户知悉。其中，日前电价大于实时电价时，价差方向为-1；反之为1；两者相等时为0，置信度过低无法判断为2"
        right={
          <Select
            options={priceDirectionOptions}
            style={{ width: 180 }}
            value={props.version}
            onChange={onChange}
          />
        }
      />
      <div style={{ height: 426 }}>
        {props.data && props.data.length > 0 ? (
          <TjChart option={chartData} group="A" />
        ) : (
          <TRDefault type="emptysm" />
        )}
      </div>
    </div>
  );
};

interface IPriceDirectionProps {
  version: number;
  onChange: (value: number) => void;
  data?: any[];
}

export default PriceDirection;
